<template>
  <div class="dia">
    <el-dialog
      v-model="dialogVisible"
      title="视频播放"
      width="540px"
      draggable
      :modal="false"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <videoPlay
        v-bind="options"
        poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
      />
    </el-dialog>
  </div>
</template>
<script setup>
// import 'vue3-video-play/dist/style.css'
// import { videoPlay } from 'vue3-video-play'
import { reactive, computed } from 'vue'
const props = defineProps({
  playDialogVisible: {
    type: Boolean,
    default: ''
  }
})
const emits = defineEmits(['update:playDialogVisible'])
const dialogVisible = computed({
  get: () => props.playDialogVisible,
  set: (val) => {
    emits('update:playDialogVisible', val)
  }
})
const options = reactive({
  width: '500px', //播放器高度
  height: '260px', //播放器高度
  color: '#409eff', //主题色
  currentTime: 0,
  speed: false, //关闭进度条拖动
  control: false, //是否显示控制器
  autoPlay: true,
  title: '', //视频名称
  src: '/static/video/xx3.mp4' //视频源
})
</script>
<style lang="scss">
.dia {
  color: #000;
  & > div {
    pointer-events: none;
  }
  .el-dialog {
    pointer-events: auto !important;
  }
}
</style>
